/**
 * Created by luojie on 2018/3/15.
 */

import "../css/buy-list.scss";
import Dialog from "../components/dialog";

export default class List extends React.PureComponent {
	constructor(props) {
		super(props);
		this.state = {
			show: props.show || false,
			dataLists: []
		}
	}
	componentWillReceiveProps(nextProps) {
		if (nextProps.show !== this.props.show) {
			this.setState({
				show: nextProps.show
			})
		}
		if (this.props.dataLists !== nextProps.dataLists) {
			this.setState({
				dataLists: nextProps.dataLists
			})
		}
	}
	render() {
		let { show, dataLists } = this.state;
		return (
			<Dialog {...this.props} isShow={show}>
				<div className="buy-list">
					<div className="buy-list-user-name">
						{dataLists && dataLists.length && dataLists[0].userName || ''}
					</div>
					<div className="buy-list-order-container">
						{
							dataLists && dataLists.length > 0 ? dataLists.map((item, index) => {
								return (
									<div className="buy-list-order-list" key={index}>
										<div className="order-organ">
											{item.orgName || '无'}
										</div>
										<div className="order-class">
											{item.courseName || '无'}
										</div>
										<div className="buy-list-info-row">
											<div className="flex1 font-12 tips-color">
												付款金额：
												<span className="red-color">
													{(item.transactionFee) || 0}元
												</span>
											</div>
										</div>
										<div className="buy-list-info-row">
											<div className="flex1 font-12 tips-color">
												购课日期：
												<span className="info-color">
													{
														item.creatDate && (() => {
															var date = item.creatDate
															return date.substring(0, date.indexOf('T')).replace('-', '年').replace('-', '月') + '日'
														})()
													}
												</span>
											</div>
										</div>
										<div className="buy-list-info-row">
											<div className="flex1 font-12 tips-color">
												订单编号：
												<span className="info-color">{item.id}</span>
											</div>
										</div>
									</div>
								)
							}) : (
									<div style={
										{
											width: '100%',
											height: '100px',
											textAlign:'center',
											lineHeight:'100px'
										}
									}>暂无购课记录!</div>
								)
						}
					</div>
				</div>
			</Dialog>
		)
	}
}